class Details{
    constructor(){
        this.pic = document.querySelector('.pic>img')
        this.details = document.querySelector('.details')
        this.title = document.querySelector('.title')
        this.price = document.querySelector('.price')
        // 五张小图片
        this.one = document.querySelector('.left>.zoom>ul>li>.one')
        this.two = document.querySelector('.left>.zoom>ul>li>.two')
        this.three = document.querySelector('.left>.zoom>ul>li>.three')
        this.four = document.querySelector('.left>.zoom>ul>li>.four')
        this.five = document.querySelector('.left>.zoom>ul>li>.five')
        this.init()
    }
    init(){
        this.getStr()
        this.request()
    }
    getStr(name){
        // location.search 这个属性可以直接拿到查询字符串需要的部分数据
        // console.log(location.search)

        // 使用slice() 进行获取
        let id = location.search.slice(1)
        // console.log(id)

        // 把参数进行处理并添加进对象(split)
        let obj = {}
        let arr = id.split('=')
        // console.log(arr)
        obj[arr[0]] = arr[1]
        // console.log(obj)

        // 把需要的东西返回 obj[name]
        return obj[name]
    }
    request(){
        // 判断有没有id存在
        let myId = this.getStr('id')
        // 如果没有id，也就是没有数据，那么跳到首页去
        if(!myId){
            location.href = '../html/1-index.html'
            return false
        }else{
            pAjax({url:'../api/goods.json'})
            .then(data=>{
                let res = JSON.parse(data)
                res = res.slice(0,20)
                // console.log(res)
                // 如果有id，就发送请求，用返回来的数据和咱们的id进行对比，并把数据获取到
                let goods = res.find(item=>{return item.goods_id == myId})
                console.log(goods)
                this.render(goods)
            })
        }
    }
    render(data){
        // data.img_small_logo      图片
        // data.goods_introduce     详情描述
        // data.title               右边标题
        // data.price               价格
        this.pic.src = data.img_big_logo
        this.details.innerHTML = data.goods_introduce
        this.title.innerHTML = data.title
        this.price.innerHTML = '￥' + data.price
        // 五张小图片
        this.one.src = data.img_small_logo
        // this.two.src = data.img_small_logo
        // this.three.src = data.img_small_logo
        // this.four.src = data.img_small_logo
        // this.five.src = data.img_small_logo
    }
}
new Details()